<template>
	<view class="app">
		<load :ready="ready"></load>
		<view class="navtop">
			<u-navbar :background="{
		        background:'#0093dd'
		    }" :border-bottom="false" title-color="#fff" title="司机端" :isFixed="true" :isBack="false">
			</u-navbar>
		</view>

		<view class="avathor-box">
			<view class="bgtop"></view>
			<view class="ibox"> 
				<u-image :src="user.davatar || avaDefault" :errorIcon="avaDefault" border-radius="10" width="120" height="120"></u-image>
				<view class="info">
					<view class="name">
						<text style="margin-right: 5px;">
							{{user.dname}}
						</text>
						<u-tag  size="mini" text="司机" mode="light" />
					</view>
					<view class="desc">
						手机号：{{user.dmobile}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html#%E8%AE%A2%E9%98%85%E6%B6%88%E6%81%AF%E8%AF%AD%E9%9F%B3%E6%8F%90%E9%86%92 -->
		<u-cell-group>
		<!-- 	
			<u-cell-item @click="link('/pages/user/order_list')" title="我的订单">
			</u-cell-item> -->
			<!-- :value="2" -->
			<u-cell-item  @click="link('/pages/user/site')" title="站点管理">
			</u-cell-item>
			<u-cell-item  @click="link('/pages/user/enter')" title="录入钢瓶">
			</u-cell-item>
		<!-- 	<u-cell-item  @click="link('/pages/user/test')" title="扫码枪">
			</u-cell-item> -->
		<!-- 	<u-cell-item  @click="link('/pages/user/test')" title="测试扫码枪">
			</u-cell-item> -->
			
			<!-- <u-cell-item  @click="link('/pages/user/bottle_form')" title="录入钢瓶流转">
			</u-cell-item> -->
			<!-- <u-cell-item  @click="link('/pages/user/bottle_record')" title="进出库记录">
			</u-cell-item> -->
			<!-- <u-cell-item  @click="handleMes" title="订阅消息">
			</u-cell-item> -->
		</u-cell-group>
		<!-- <u-gap height="30"></u-gap> -->
		<u-cell-group :border="false" >
			<u-cell-item  title="退出登录" @click="showExit=true" :border-bottom="false">
			</u-cell-item>
		</u-cell-group>
		
		<u-modal v-model="showExit" @confirm="confirmExit" :show-cancel-button="true" content="是否退出登录？"></u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			return {
				showExit:false,
				ready: false,
				user: {},
				avaDefault:this.$config.avaDefault
			};
		},
		onLoad() {
			that = this;
		},
		onReady() {},
		onShow() {
			if (!this.userInfo) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			this.getUserInfo();
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			async confirmExit() {
				this.setUserInfo(null);
				uni.reLaunch({
					url: '/pages/login/login'
				})
				// console.log('confirmExit');
				// uni.showLoading()
				// let res = await this.$api.agencyAuthLogout();
				// uni.hideLoading();
				// if (res.data.code == this.$config.RESOK) {
				// 	this.setUserInfo(null);
				// 	this.$common.showTip(res.data.msg);
				// 	setTimeout(() => {
				// 		uni.reLaunch({
				// 			url: '/pages/login/login'
				// 		})
				// 	}, 2000)
				// } else {
				// 	this.$message.error(res.data.msg);
				// }
			},
			handleMes(){
				wx.requestSubscribeMessage({
					  tmplIds: ['Ge3Obvb8xTzNDdNS3015rLPRsE_Uh5kwmU_m7n0XHq0','Agy_xdvaFCZTjnm9HbOeUDE_DKlo8ySlBr3I1H1Zkhw','N-jjtMKUQQIOuDUu-Hf8KkwLrxfWyBTqBvP3Ep9Bok8'],
					success: res=>{
					}, 
					fail:(err)=>{
					},
				})
			},
			async getUserInfo() {
				try {
					let res = await this.$api.userInfo();
					if (res.data.code == this.$config.RESOK) {
						let user = this.$user.normalFilter(res.data.data)
						let userInfo = {
							...this.userInfo,
							...user,
						}
						this.user = userInfo
						this.setUserInfo(userInfo)
						this.ready = true
					} else{
						uni.removeStorageSync('userInfo')
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				} catch (e) {
					//TODO handle the exception
					uni.removeStorageSync('userInfo')
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},
			...mapActions(['setUserInfo'])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}

	.tab-wrap {
		display: flex;
		width: 100%;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2px solid #eee;

		.tab-item {
			width: 50%;
			font-size: 16px;

			&.active {
				border-bottom: 4px solid $color;
				color: $color;
			}
		}
	}

	.fixed-head {
		padding: 0 30rpx;
		background: #fff;
		// position: fixed;
		left: 0;
		width: 100%;
		z-index: 99;
	}

	.searchbox {
		display: flex;
		height: 80rpx;
		align-items: center;
		background: #F6F8FB;
		padding: 0 20rpx;
		margin: 10rpx 0 0;
		border-radius: 5px;

		.icon {
			width: 20px;
			height: 20px;
		}

		.input {
			font-size: 15px;
			padding: 0 20rpx;
			flex: 1;
		}

		.btn-search {
			background: $color;
			color: #fff;
			border-radius: 5px;
			height: 60rpx;
			line-height: 60rpx;
			width: 120rpx;
			text-align: center;
		}
	}

	.h260 {
		height: 260rpx;
	}

	.order-list {
		padding: 20rpx 30rpx 0;

		.order-item {
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 12px;
			padding: 0 30rpx;
		}

		.order-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
		}

		.order-foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				font-size: 14px;

				text {
					color: $color-red;
					font-size: 16px;
				}
			}
		}

		.btnbox {}
	}

	.avathor-box {
		position: relative;
		padding: 20rpx 30rpx 0;

		.bgtop {
			background: $color;
			width: 100%;
			height: 140rpx;
			border-radius: 0 0 0 70px;
			top: 0;
			left: 0;
			position: absolute;
		}

		.ibox {
			position: relative;
			width: 100%;
			z-index: 9;
			background: #fff;
			border-radius: 10px;
			display: flex;
			padding: 20rpx;
			box-shadow: 0 5px 5px #eee;
			justify-content: space-between;
			align-items: center;
		}
		.out{
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			z-index: 9;
			font-size: 13px;
			color: #666;
		}
		.info {
			width: 510rpx;
		}

		.name {
			font-size: 16px;
			color: #2C2C2C;
			font-weight: bold;
			margin-bottom: 2px;
		}

		.desc {
			font-size: 12px;
			color: #7E8187;
		}

		.btn {
			display: inline-block;
			font-size: 13px;
			background: $color;
			color: #fff;
			padding: 6px 12px;
			border-radius: 5px;
			margin: 5px 0 0;
		}
	}


	.order-list {
		padding: 20rpx 30rpx 0;

		.order-item {
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 12px;
			padding: 0 30rpx;

			&.package {
				background: #f1f7fd;
			}
		}

		.order-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
		}

		.order-foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				font-size: 14px;

				text {
					color: $color-red;
					font-size: 16px;
				}
			}
		}

		.btnbox {
			display: flex;

			.btns {
				margin-left: 5px;
			}
		}
	}


	.goods-list {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 10rpx 0;

		.goods-item {
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;

			&:nth-last-child(1) {
				margin: 0;
			}
		}

		.info {
			flex: 1;
			width: 480rpx;
			padding-left: 20rpx;
		}

		.goods-name {
			line-height: 26px;
			font-size: 14px;
			font-weight: bold;
		}

		.attr {
			font-size: 12px;
			color: #979797;
			margin-bottom: 2px;
		}

		.price {
			font-size: 12px;
			color: $color-red;

			text {
				font-size: 15px;
			}
		}

		.desc {
			display: flex;
			justify-content: space-between;
		}
	}
</style>